<template>
  <div class="cart_button">
    <div class="button_item" v-if="!specsLength">
      <a class="minus" v-if="foodNum"
        @click.stop="removeOutCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock)"
      >
        <span class="iconfont">&#xe60c;</span>
      </a>
      <span class="count" v-if="foodNum">{{foodNum}}</span>
      <a class="add"
        @click.stop="addToCart(foods.category_id, foods.item_id, foods.specfoods[0].food_id, foods.specfoods[0].name, foods.specfoods[0].price, '', foods.specfoods[0].packing_fee, foods.specfoods[0].sku_id, foods.specfoods[0].stock, $event)"
      >
        <span class="iconfont">&#xe686;</span>
      </a>
    </div>
    <div class="button_item" v-else>
      <a class="minus" v-if="foodNum" @click.stop="showReduceTip">
        <span class="iconfont">&#xe60c;</span>
      </a>
      <span class="count" v-if="foodNum">{{foodNum}}</span>
      <a class="add" @click.stop="openSpecsPopus(foods)">
        <span class="iconfont">&#xe686;</span>
      </a>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'BuyCart',
  props: ['foods', 'specsLength', 'shopId'],
  data () {
    return {
      showMoveDot: [] // 控制下落的小圆点显示隐藏
    }
  },
  computed: {
    ...mapState(['cartList']),
    // 监听cartList变化，更新当前商铺的购物车信息shopCart，同时返回一个新的对象
    shopCart () {
      return Object.assign({}, this.cartList[this.shopId])
    },
    // shopCart变化的时候重新计算当前商品的数量
    foodNum () {
      let categoryId = this.foods.category_id
      let itemId = this.foods.item_id
      if (this.shopCart && this.shopCart[categoryId] && this.shopCart[categoryId][itemId]) {
        let num = 0
        Object.values(this.shopCart[categoryId][itemId]).forEach((item, index) => {
          num += item.num
        })
        return num
      } else {
        return 0
      }
    }
  },
  methods: {
    ...mapMutations(['ADD_CART', 'MINUS_CART']),
    // 加入购物车，计算按钮位置。
    addToCart (categoryId, itemId, foodId, name, price, specs, packingFee, skuId, stock, event) {
      this.ADD_CART({shopId: this.shopId, categoryId, itemId, foodId, name, price, specs, packingFee, skuId, stock})
      let elLeft = event.target.getBoundingClientRect().left
      let elBottom = event.target.getBoundingClientRect().bottom
      this.showMoveDot.push(true)
      this.$emit('showMoveDot', this.showMoveDot, elLeft, elBottom)
    },
    // 移出购物车
    removeOutCart (categoryId, itemId, foodId, name, price, specs, packingFee, skuId, stock) {
      if (this.foodNum > 0) {
        this.MINUS_CART({shopId: this.shopId, categoryId, itemId, foodId, name, price, specs, packingFee, skuId, stock})
      }
    },
    // 显示规格列表
    openSpecsPopus (foods) {
      this.$emit('open', foods)
    },
    // 点击多规格商品的减按钮，弹出提示
    showReduceTip () {
      this.$emit('showReduceTip')
    }
  }
}
</script>

<style lang='stylus' scoped>
 .button_item
  display: flex
  align-items: center
  a
    width: .44rem
    height: .44rem
    display: block
    color: #fff
    text-align: center
    line-height: .44rem
    border-radius: 100%
    background: #2396ff
    box-sizing: border-box
    .iconfont
      font-size: .24rem
  a.minus
    color: #2396ff
    background: #fff
    border: .01rem #2396ff solid
  span
    width: .5rem
    font-size: .28rem
    text-align: center
</style>
